<template>
  <div class="login-card">
    <div v-if="!showResetPassword">
      <div class="login-tabs">
        <span class="active">密码登录</span>
        <div class="icon-wrapper">
          <div class="dialog-wrapper">
            <div class="dialog">扫码登录更安全</div>
          </div>
          <img class="qr-icon" :src="qrCode" alt="二维码" />
        </div>
      </div>
      <form @submit.prevent="handleLogin">
        <div class="phone-input-row">
          <div class="country-code">
            <span>中国</span>
            <select>
              <option value="+86">+86</option>
            </select>
          </div>
          <input class="phone-number" type="text" placeholder="手机号" v-model="account" />
        </div>
        <input type="password" placeholder="请输入密码" class="password-input" v-model="password" />
        <div class="forgot-password">
          <a href="#" @click.prevent="showResetPassword = true">忘记密码</a>
        </div>
        <div class="agreement-row">
          <input type="checkbox" id="agreement" v-model="agreeProtocol" />
          <label for="agreement">同意《用户服务协议》</label>
        </div>
        <button type="submit" class="login-button" :disabled="!agreeProtocol">登录</button>
      </form>
    </div>
    
    <HuangResetPassword
      v-else
      @password-changed="handlePasswordChanged"
      @cancel="showResetPassword = false"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import qrCode from '@/assets/images/two.png'
import HuangResetPassword from './HuangResetPassword.vue'

const router = useRouter()
const userStore = useUserStore()

const account = ref('')
const password = ref('')
const agreeProtocol = ref(false)
const showResetPassword = ref(false)

const handleLogin = async () => {
  if (!agreeProtocol.value) {
    ElMessage.error('请先同意用户服务协议')
    return
  }

  const success = userStore.login(account.value, password.value)
  if (success) {
    ElMessage.success('登录成功')
    const redirect = router.currentRoute.value.query.redirect || '/'
    router.push(redirect)
  } else {
    ElMessage.error('账号或密码错误')
  }
}

const handlePasswordChanged = async (data) => {
  const success = userStore.resetPassword(data.account, data.newPassword)
  if (success) {
    ElMessage.success('密码修改成功，请使用新密码登录')
    showResetPassword.value = false
    account.value = data.account
    password.value = ''
  } else {
    ElMessage.error('账号验证失败')
  }
}
</script>
<style scoped>
.login-card {
  width: 320px;
  max-width: 45%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #eee;
}
.login-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  color: #666;
}
.login-tabs span {
  cursor: pointer;
  padding-bottom: 4px;
}
.login-tabs .active {
  color: #f60;
  border-bottom: 2px solid #f60;
  font-weight: bold;
}
.icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 8px;
}
.dialog-wrapper {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
  z-index: 10;
}
.icon-wrapper:hover .dialog-wrapper {
  display: block;
}
.qr-icon {
  width: 60px;
  height: 60px;
}
.phone-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.country-code {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 8px;
  height: 40px;
  background-color: #fff;
  font-size: 14px;
  color: #333;
}
.country-code span {
  margin-right: 6px;
}
.country-code select {
  border: none;
  outline: none;
  font-size: 14px;
  background-color: transparent;
  appearance: none;
  cursor: pointer;
}
.phone-number {
  flex: 1;
  height: 40px;
  padding-left: 10px;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
}
.password-input {
  height: 40px;
  padding-left: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.forgot-password {
  text-align: right;
  margin-bottom: 12px;
  font-size: 12px;
}
.forgot-password a {
  color: #409eff;
  text-decoration: none;
}
.login-button {
  width: 100%;
  background-color: #f60;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-bottom: 12px;
  border-radius: 4px;
}
.agreement {
  font-size: 12px;
  color: #999;
}
.agreement a {
  color: #409eff;
  text-decoration: none;
}
</style> 